<template>
  <div class="page comments-datail" ref="webview">
    <div class="nav-bar">
      <van-nav-bar title="评价详情" class="bg_white" left-arrow fixed @click-left="$router.go(-1)" />
    </div>
    <div class="userInfo">
      <div class="avatar">
        <img :src="commentsInfo.user_photo" />
      </div>
      <div class="name">{{commentsInfo.nickname}}</div>
    </div>
    <div class="common-bar center">
      <span class="title">评分</span>
      <van-rate class="common-bar-content" v-model="commentsInfo.goods_score" icon="rate-yellow" void-icon="rate-gray" readonly />
    </div>
    <div class="common-bar">
      <span class="title">详情</span>
      <div class="common-bar-content">
        <div class="content">{{commentsInfo.content}}</div>
        <div class="time">{{commentsInfo.create_time | formatDate('YYYY-MM-DD')}}</div>
      </div>
    </div>
    <div class="common-bar common-bar-border">
      <span class="title">追评</span>
      <div class="common-bar-content">
        <div class="content">{{commentsInfo.append_content}}</div>
        <div class="time">{{commentsInfo.append_time | formatDate('YYYY-MM-DD')}}</div>
      </div>
    </div>
    <div class="reply-title">评价回复</div>
    <div class="userInfo">
      <div class="avatar">
        <img :src="commentsInfo.shop_img" />
      </div>
      <div class="name">{{commentsInfo.shop_name}}</div>
    </div>
    <div class="content">{{commentsInfo.shop_reply}}</div>
    <div class="time">{{commentsInfo.reply_time}}</div>
  </div>
</template>
<script>
import { ImagePreview } from 'vant';
export default {
  name: 'commentsDetails',
  data () {
    return {
      rateValue: 4,
      commentsInfo: {}
    };
  },
  props: {
    cateItem: {
      type: Array
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  mounted () {
    this.getCommentsDetails();
  },
  methods: {
    imagePreview (index, item) {
      ImagePreview({
        images: item.ImgList,
        startPosition: index,
        closeable: true,
        className: this.isApp ? 'isApp' : ''
      });
    },
    getCommentsDetails () {
      let params = {
        id: this.$route.query.id
      };
      this.$API.comments.getCommentsInfo(params).then(res => {
        if (!res.code) {
          this.commentsInfo = res.data;
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
.comments-datail {
  padding: 0 34px;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #eee; /*no*/
  .userInfo {
    display: flex;
    align-items: center;
    padding: 3px 0 28px 0;
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #eee;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .name {
      font-size: 34px;
      color: #353535;
      margin: 0 20px;
      font-weight: 800;
    }
  }
  .common-bar {
    display: flex;
    align-items: flex-start;
    padding: 0 0 40px 0;
    .title {
      width: 83px;
      font-size: 28px;
      color: #353535;
      font-weight: 800;
      line-height: 44px;
    }
    .common-bar-content {
      flex: 1;
    }
  }
  .common-bar-border {
    border-bottom: 1px solid #eee;
  }
  .reply-title {
    font-size: 28px;
    color: #353535;
    font-weight: 800;
    margin: 30px 0 40px 0;
  }
  .content {
    font-size: 28px;
    color: #353535;
    line-height: 44px;
  }
  .time {
    color: #969aa6;
    font-size: 24px;
    margin-top: 28px;
  }
  .ml100 {
    margin-left: 83px;
  }
  .center {
    align-items: center;
  }
}
</style>
